<template>
  <div>
    <div v-show="!monacoBox">
      <div ref="wang-editor" class="wang-editor" />
    </div>
    <div v-if="monacoBox">
      <el-button type="primary" class="bottom" @click="getHtmlint"
        >可视化界面</el-button>
     <monaco @change="changeValue" :value="newHtml" />
    </div>

    <!--<el-dialog
      :visible.sync="modalPic"
      width="1024px"
      title="上传图片"
    >
      <uploadPictures
        v-if="modalPic"
        :isChoice="isChoice"
        @getPic="getPic"
        @getPicD="getPicD"
      ></uploadPictures>
    </el-dialog>-->
    <el-dialog
      :visible.sync="modalVideo"
      width="1024px"
      title="上传视频"
    >
      <uploadVideo @getVideo="getvideo" :isDiy="true"></uploadVideo>
    </el-dialog>
  </div>
</template>
<script>

import monaco from "./monaco";
import E from "wangeditor";
import AlertMenu from "./editor";
import HtmlMenu from "./html";
import uploadPictures from "@/components/uploadPicture";
import uploadVideo from "@/components/uploadVideo";

import util from '../../utils/bus'
export default {
  name: "Index",
  components: {
    uploadPictures,
    uploadVideo,
    monaco,
  },
  props: {
    content: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      monacoBox: false,
      value: "",
      modalPic: false,
      isChoice: "多选",
      picTit: "danFrom",
      img: "",
      modalVideo: false,
      editor: null,
      uploadSize: 2,
      video: "",
			newHtml:''
    };
  },
  computed: {
      initEditor () {
          return this.content && this.editor;
      }
  },
  watch: {
    initEditor (val) {
        if (val) {
            this.editor.txt.html(this.content);
        }
    }
  },
  created() {
    
  },
  mounted() {
    this.createEditor();
    util.$on('Video',(Video)=>{
        this.getvideoint();
    })
       util.$on('Html',(Html)=>{
        this.getHtmlint();
    })

  },

  methods: {
    changeValue(value) {
      this.newHtml = value;
      this.$emit("editorContent", value);

      this.$emit("input", value);
    },
    // 获取多张图信息
    getPic(pc) {
      let _this = this;
      _this.img = pc.att_dir;
      _this.modalPic = false;
      this.editor.cmd.do(
        "insertHTML",
        `<img src="${_this.img}" style="max-width:100%;"/>`
      );
    },
    getimg() {
      let _this = this;
      _this.isChoice = "多选";
      _this.$modalUpload(function(img) {
        img.map((d) => {
          _this.editor.cmd.do(
            "insertHTML",
            `<img src="${d}" style="max-width:100%;"/>`
          );
        });          
      },'2', 'content')

      // this.$modalUpload(function(img) {
      //     if(tit==='1'&& !num){
      //       _this.driverForm.image = img[0].sattDir
      //     }
      //   },tit, 'content')

    },
    getvideoint() {
      this.modalVideo = true;
    },
    getHtmlint() {
      this.monacoBox = !this.monacoBox;
      this.value = this.newHtml;
      if (!this.monacoBox) {
        this.editor.txt.html(this.newHtml);
      }
    },
    getPicD(data) {
      let _this = this;
      _this.modalPic = false;
      data.map((d) => {
        this.editor.cmd.do(
          "insertHTML",
          `<img src="${d.att_dir}" style="max-width:100%;"/>`
        );
      });
    },
    getvideo(data) {
      let _this = this;
      _this.modalVideo = false;
      this.video = data;
      this.editor.cmd.do(
        "insertHTML",
        `<video src="${_this.video}" controls style="max-width:100%;"/>`
      );
    },

    createEditor() {
      let _this = this;
      const menuKey = "alertMenuKey";
      const html = "alertHtml";
      this.editor = new E(this.$refs["wang-editor"]);

      this.editor.menus.extend(menuKey, AlertMenu);
      this.editor.menus.extend(html, HtmlMenu);
      this.editor.config.menus = this.editor.config.menus.concat(html);
      this.editor.config.menus = this.editor.config.menus.concat(menuKey);
      this.editor.config.uploadImgFromMedia = function () {
        _this.getimg();
      };
      // this.editor.config.uploadVideoHeaders = _this.header;
      this.editor.config.height = 600;
      this.editor.config.menus = [
        "alertHtml",
        "head",
        "bold",
        "fontSize",
        "fontName",
        "italic",
        "underline",
        "strikeThrough",
        "indent",
        "lineHeight",
        "foreColor",
        "backColor",
        "link",
        "list",
        // "todo",
        "justify",
        "quote",
        "emoticon",
        "image",
        "alertMenuKey",
        // "table",
        "code",
        "splitLine",
      ];
      // 配置全屏功能按钮是否展示
      //   this.editor.config.showFullScreen = false
      this.editor.config.uploadImgShowBase64 = true;
      //   this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
      this.editor.config.zIndex = 0;
      //   this.editor.config.uploadImgMaxSize = this.uploadSize * 1024 * 1024
      this.editor.config.compatibleMode = () => {
        // 返回 true 表示使用兼容模式；返回 false 使用标准模式
        return true;
      };
      this.editor.config.onchange = (newHtml) => {
        this.newHtml = this.addVerticalAlignToImages(newHtml);
        this.$emit("editorContent", newHtml);
      };
      this.editor.config.onchangeTimeout = 800; // change后多久更新数据
      // 配置颜色（文字颜色、背景色）
      this.editor.config.colors = [
        "#000000", "#ffffff", "#eeece0", "#1c487f", "#4d80bf", "#c24f4a", "#8baa4a", "#7b5ba1", "#46acc8",
            "#f9963b",
            "#FF0000",
            "#00FF00",
            "#0000FF",
            "#FF00FF",
            "#00FFFF",
            "#FFFF00",
            "#000000",
            "#70DB93",
            "#5C3317",
            "#9F5F9F",
            "#B5A642",
            "#D9D919",
            "#A67D3D",
            "#8C7853",
            "#A67D3D",
            "#5F9F9F",
            "#D98719",
            "#B87333"
      ];

      this.editor.create();
    },

    addVerticalAlignToImages(htmlString) {  
    // 使用正则表达式匹配所有的 <img> 标签，并捕获它们的开始标签部分  
        const imgTagRegex = /(<img\b[^>]*>)/g;  
      
        // 使用替换函数来修改匹配到的 <img> 标签  
        return htmlString.replace(imgTagRegex, (match) => {  
            // 检查标签中是否已经有 style 属性  
            if (match.includes('style=')) {  
                // 如果已经有了 style 属性，我们在末尾添加 vertical-align: top;  
                // 注意：这里简单地用分号和空格分隔，可能不是最健壮的方法  
                // 在实际应用中，你可能需要更复杂的解析和合并样式  
                return match.replace(/(style="[^"]*")/, (styleAttr) => {  
                    return styleAttr.replace(/;$/, '; ') + 'vertical-align: top;';  
                });  
            } else {  
                // 如果没有 style 属性，我们添加一个新的 style 属性  
                return match.replace(/>$/, ' style="vertical-align: top;">');  
            }  
        });  
    },  
    
  },
};
</script>

<style lang="scss" scoped>
.bottom{
  margin-bottom: 10px;
  cursor: pointer;
}
//
::v-deep img{
  vertical-align: top;
  outline-width: 0px;
}
</style>
